import React, { useMemo, useState } from "react";
import { useNavigate, useLocation, useSearchParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { NavBar, Card, List, Button, Checkbox, Tag, Toast } from "antd-mobile";
import { SubmitBar } from "react-vant";
import { SwitchState } from "../../store/PersonSlice";
import dayjs from "dayjs";
import styles from "./order.module.css";

function Index() {
  const { PersonList } = useSelector((state) => state.PersonSlice);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { state } = useLocation();
  const [sp] = useSearchParams();
  const start = sp.get("start");
  const end = sp.get("end");

  const SelPersonList = useMemo(() => {
    return PersonList.filter((item) => {
      return item.state;
    });
  }, [PersonList]);

  const sitList = useMemo(() => {
    if (SelPersonList.length === 0) return [];
    if (SelPersonList.length === 1) {
      return [["A", "B", "C", "D", "E"]];
    }
    if (SelPersonList.length === 2) {
      return [
        ["A", "B", "C", "D", "E"],
        ["A", "B", "C", "D", "E"],
      ];
    }
    if (SelPersonList.length === 3) {
      return [
        ["A", "B", "C", "D", "E"],
        ["A", "B", "C", "D", "E"],
        ["A", "B", "C", "D", "E"],
      ];
    }
    if (SelPersonList.length === 4) {
      return [
        ["A", "B", "C", "D", "E"],
        ["A", "B", "C", "D", "E"],
        ["A", "B", "C", "D", "E"],
        ["A", "B", "C", "D", "E"],
      ];
    }
  }, [SelPersonList]);


  const [posList, setPosList] = useState([]);
  const price = state.lps[0].atp * SelPersonList.length;

  const lastList = useMemo(() => {
    return posList.slice(-SelPersonList.length);
  }, [posList, SelPersonList]);

  const addPos = (row, pos) => {
    setPosList([...posList, { row, pos }]);
  };

  const handelToPay = () => {
    if (SelPersonList.length === 0) return Toast.show("请选择乘车人");
    const id = Math.random().toString().slice(2);
    navigate(`/pay?id=${id}&price=${price}&title=机票订单`);
  };

  return (
    <div style={{ paddingBottom: 50 }}>
      <NavBar onBack={() => navigate(-1)}>订单</NavBar>
      <Card>
        <div className={styles.orderTop}>
          <h3>{dayjs().format("YYYY-MM-DD")}</h3>
          <p>
            <span>{start}</span>
            ➡️
            <span>{end}</span>
          </p>
        </div>
      </Card>
      <Card title="选择乘机人">
        <Button
          color="primary"
          size="mini"
          onClick={() => navigate("/rideperson")}
        >
          添加乘机人
        </Button>
        <List>
          {PersonList.map((item, ind) => (
            <List.Item
              key={ind}
              extra={
                <Checkbox
                  checked={item.state}
                  onChange={() => dispatch(SwitchState(item))}
                />
              }
              description={<span>{item.code}</span>}
            >
              {item.name}
            </List.Item>
          ))}
        </List>
      </Card>
      <Card title="选择坐席">
        <div className={styles.sitBox}>
          {sitList.map((item, row) => (
            <div key={row} className={styles.sitRow}>
              {item.map((it, pos) => (
                <Tag
                  key={pos}
                  color={
                    lastList.some(
                      (item) => item.row === row && item.pos === pos
                    )
                      ? "primary"
                      : "default"
                  }
                  onClick={() => addPos(row, pos)}
                >
                  {it}
                </Tag>
              ))}
            </div>
          ))}
        </div>
      </Card>
      <SubmitBar
        label={
          <span style={{ marginRight: 20 }}>
            已选择：{SelPersonList.length}人
          </span>
        }
        price={price * 100}
        buttonText="提交订单"
        onSubmit={() => handelToPay()}
      />
    </div>
  );
}

export default Index;
